<template>
    <div class="model-server">
        <button @click="addModelDetails()">新增模型</button>
        <div class="container">
            <div class="model-item" v-for="item in modelList" :key="item.model_name" @click="showModelDetails(item)">
                <img :src="item.image_url">
            </div>
        </div>
    </div>
    <ModelDetail ref = "modelDetail"/>
    <ModelUpload ref="modelUpload" @submit="handleAddModel"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ModelDetail from './ModelDetail.vue'
import ModelUpload from './ModelUpload.vue'

const modelDetail = ref<InstanceType<typeof ModelDetail>>();
const modelUpload = ref<InstanceType<typeof ModelUpload>>();

const modelList = ref([
    {
        model_name: 'model1',
        image_url: '/public/image/body.png',
        model_file: '/public/model/body.glb'
    },
    {
        model_name: 'model2',
        image_url: '/public/image/car_bottom.png',
        model_file: '/public/model/car_bottom.glb'
    },
    {
        model_name: 'model3',
        image_url: '/public/image/car_top.png',
        model_file: '/public/model/car_top.glb'
    },
    {
        model_name: 'model4',
        image_url: 'public/image/car.png',
        model_file: '/public/model/car.glb'
    },
])

const handleAddModel = (newModel: any) => {
    modelList.value.push(newModel)
}


const showModelDetails = (data: any) => {
    modelDetail.value?.open(data)
}
const addModelDetails = () => {
    modelUpload.value?.open()
}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-wrap: wrap;

    .model-item {
        width: 400px;
        height: 300px;
        border: 1px solid #000;
        margin: 10px;

        img{
            cursor: pointer;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}
</style>